<template>
	<div class="startegy">
		<h1>景点列表</h1>
		<div class="content" v-if="isShow">
			<el-row>
				<el-button type="primary" @click="addStrategy">新增景点</el-button>
			</el-row>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="景点名称">
					<template slot-scope="scope">
						<span>{{scope.row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="背景图">
					<template slot-scope="scope">
						<img :src="scope.row.background_url" width="100px">
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleUp(scope.row.orders)">上升</el-button>
						<el-button size="mini" @click="handleDown(scope.row.orders)">下降</el-button>
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
		<!--增加景点-->
		

</template>

<script>
	import config1 from "@/assets/js/config1.js";
	import config from "@/assets/js/config.js";
	export default {
		data() {
			return {
				tableData: [{
					name:'',
					img_url:'',
					background_url:''
				}],
                baseUrl:config1.baseUrl,
				isShow: true,
				dialogVisible: false,
				delid:''
			}
		},
		methods: {
			//编辑按钮
			handleEdit(arr) {
				// console.log(arr);
				// console.log(this.$config.findAttractions)
				this.$router.push({
					path:"/strategy/edit",
					query:{
						id:arr.id
					}
				})
			},
			//上升
			handleUp(ods) {
				console.log(ods);
				this.$require.post(this.$config.sortAttractions,{
					move:1,
					orders:ods
				})
				.then((res)=>{
					this.getList()
				})
			},
			//下降
			handleDown(ods) {
				this.$require.post(this.$config.sortAttractions,{
					move:-1,
					orders:ods
				})
				.then((res)=>{
					this.getList()
				})
			},
			//删除
			deleteRow(id) {
				
				// .then((res)=>{
				// 	console.log(res)
				// })
				
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				
				}).then((res) => {
					// this.delid = id
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
					this.$require.post(this.$config.delAttractions,{
						id:id
					})
					.then((res)=>{
						console.log(res)
						this.getList()
					})
					
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
					this.getList()
				});
				console.log(this.delid)
			},
			//新增景点
			addStrategy() {
				this.$router.push({
					path:"/strategy/add"
				})
			},

			//请求数据
			getList(){
				this.$require.get(config1.tipsList)
				.then((res) => {
					console.log(res)
				this.tableData = res.data.data.rows
				})
			}
		},
		created(){
			this.getList()
		}

	}
</script>

<style lang="scss" scoped="scoped">
	$htitle:32px; //标题文字大小
	.el-table .cell {
		white-space: nowrap;
	}
	
	.startegy {
		padding: 0 30px;
	}
	
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.el-table td,
	.el-table th {
		padding: 12px 0;
	}
	
	.el-button--mini,
	.el-button--mini.is-round {
		padding: 12px 20px;
	}
	
	.el-table .cell {
		background-color: #000;
	}
	
	h1 {
		font-size: $htitle;
		margin: 21px 0;
	}
	
	.el-input--suffix .el-input__inner {
		padding-right: 30px;
	}
	
	h2 {
		margin: 15px 0;
	}
</style>